<template>
  <div :class="`${prefixCls}-toolbar`" class="flex items-center px-2 py-1">
    <template v-for="item in toolbarItemList" :key="item.type">
      <Tooltip placement="bottom" v-bind="item.disabled ? { visible: false } : {}">
        <template #title>{{ item.tooltip }}</template>
        <span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)">
          <Icon :icon="item.icon" :class="item.disabled ? 'cursor-not-allowed disabeld' : 'cursor-pointer'" />
        </span>
      </Tooltip>
      <Divider v-if="item.separate" type="vertical" />
    </template>
  </div>
</template>
<script lang="ts" setup name="FlowChartToolbar">
import type { ToolbarConfig } from './types'

import { nextTick, onUnmounted, ref, unref, watchEffect } from 'vue'
import { Divider, Tooltip } from 'ant-design-vue'
import { Icon } from '@/components/Icon'

import { useFlowChartContext } from './useFlowContext'
import { ToolbarTypeEnum } from './enum'

defineProps({
  prefixCls: String
})
const emit = defineEmits(['view-data'])
const toolbarItemList = ref<ToolbarConfig[]>([
  {
    type: ToolbarTypeEnum.ZOOM_IN,
    icon: 'codicon:zoom-out',
    tooltip: '缩小'
  },
  {
    type: ToolbarTypeEnum.ZOOM_OUT,
    icon: 'codicon:zoom-in',
    tooltip: '放大'
  },
  {
    type: ToolbarTypeEnum.RESET_ZOOM,
    icon: 'codicon:screen-normal',
    tooltip: '重置比例'
  },
  { separate: true },
  {
    type: ToolbarTypeEnum.UNDO,
    icon: 'ion:arrow-undo-outline',
    tooltip: '后退',
    disabled: true
  },
  {
    type: ToolbarTypeEnum.REDO,
    icon: 'ion:arrow-redo-outline',
    tooltip: '前进',
    disabled: true
  },
  { separate: true },
  {
    type: ToolbarTypeEnum.SNAPSHOT,
    icon: 'ion:download-outline',
    tooltip: '下载'
  },
  {
    type: ToolbarTypeEnum.VIEW_DATA,
    icon: 'carbon:document-view',
    tooltip: '查看数据'
  }
])

const { logicFlow } = useFlowChartContext()

function onHistoryChange({ data: { undoAble, redoAble } }) {
  const itemsList = unref(toolbarItemList)
  const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO)
  const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO)
  if (undoIndex !== -1) {
    unref(toolbarItemList)[undoIndex].disabled = !undoAble
  }
  if (redoIndex !== -1) {
    unref(toolbarItemList)[redoIndex].disabled = !redoAble
  }
}

const onControl = (item) => {
  const lf = unref(logicFlow)
  if (!lf) {
    return
  }
  switch (item.type) {
    case ToolbarTypeEnum.ZOOM_IN:
      lf.zoom()
      break
    case ToolbarTypeEnum.ZOOM_OUT:
      lf.zoom(true)
      break
    case ToolbarTypeEnum.RESET_ZOOM:
      lf.resetZoom()
      break
    case ToolbarTypeEnum.UNDO:
      lf.undo()
      break
    case ToolbarTypeEnum.REDO:
      lf.redo()
      break
    case ToolbarTypeEnum.SNAPSHOT:
      lf.getSnapshot()
      break
    case ToolbarTypeEnum.VIEW_DATA:
      emit('view-data')
      break
  }
}

watchEffect(async () => {
  if (unref(logicFlow)) {
    await nextTick()
    unref(logicFlow)?.on('history:change', onHistoryChange)
  }
})

onUnmounted(() => {
  unref(logicFlow)?.off('history:change', onHistoryChange)
})
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-flow-chart-toolbar';

html[data-theme='dark'] {
  .lf-dnd {
    background: #080808;
  }
}

.@{prefix-cls} {
  height: 36px;
  background-color: @app-content-background;
  border-bottom: 1px solid @border-color-base;

  .disabeld {
    color: @disabled-color;
  }

  &__icon {
    display: inline-block;
    padding: 2px 4px;
    margin-right: 10px;

    &:hover {
      color: @primary-color;
    }
  }
}
</style>
